<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				left: 0px;
				top: 0px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
		
		<script type="text/javascript">
				// Promise :是ES6出现的一个内置的类；解决异步问题；
				// FormData
				
				function move(ele,target,dir){
					return new Promise((res,rej)=>{
							let timer = setInterval(()=>{
									let LeftNum = parseInt( getComputedStyle(ele,null)[dir]);
									
									let speed = 10* (target>LeftNum?1:-1);
									if(LeftNum==target){
											clearInterval(timer);
											// cb && cb();
											res("运动完成");
									}else{
										ele.style[dir] = LeftNum + speed + "px";
									}
								},100)
						
					})
				}
				
				let boxEle = document.querySelector(".box");
				// 1. 微任务和宏任务 2.then简单的链式实现；
				// ajax 做一个promise改造
				move(boxEle,300,"left").then(res=>{
					console.log(111,res);
					return move(boxEle,300,"top");
				}).then(res=>{
					console.log(222,res);
					return move(boxEle,0,"left");
				}).then(res=>{
					console.log(333,res);
					return move(boxEle,0,"top");
				}).then(res=>{
					console.log("最后一个的结果");
				})
				
				// 回调地狱 ：回调函数出现层层嵌套关系；
				// 维护困难；
				// move(boxEle,300,"left",function(){
				// 	console.log("运动结束");
					
				// 	move(boxEle,300,"top",function(){
				// 		move(boxEle,0,"left",function(){
				// 			console.log(1111);
				// 			move(boxEle,0,"top",function(){
				// 					console.log("运动结束");
				// 			})
				// 		})
				// 	})
				// });
			
			
			
			// Promise 会把 异步的依次执行 改成  链式调用 避免回调地狱问题；
			
			
			
		</script>
	</body>
</html>
